<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1></h1>
    <script>
        // 递归就是函数自己调用自己(直接,间接调用都可以)

        // 递归自己调用自己容易出现死循环
        // function fn(){
        //     console.log('我是函数fn');
        //     fn()
        // }
        // // 不调用不执行
        // fn()

        // 1.停止条件:满足条件跳出
        // let num = 0;
        // function fn(){
        //     num++
        //     console.log('我是函数fn');
        //     if(num == 3){
        //         return;
        //     }
        //     fn()
        // }
        // fn()

        // 2.停止条件:满足条件再递归
        let num1 = 0;
        function fn(){
            num1++
            console.log('我是函数fn');
            if(num1 < 5){
                fn() // 满足条件再递归
            }
        }
        // 不调用不执行
        fn()


         // 3.案例-利用setTineout 和递归模拟 setInterval - 页面加载的时候赋值一次;
         document.querySelector('h1').innerHTML = new Date().toLocaleString()
    
    function fn(){
        // 定义一个延时器
        setTimeout(() => {
            // 先输出当前时间,然后再递归函数
            document.querySelector('h1').innerHTML = new Date().toLocaleString()
            // 递归要写到延时器里面,否则会报错
            fn()
        },1000)
    }
    // 函数不调用不执行
    fn() 
   
    </script>
</body>
</html>